<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>街道标注</title>
    <link rel="stylesheet" href="../v6.4.3/css/ol.css">
  </head>
  <body>
    <div id="map" style="height: 500px;"></div>
    
    <script src="../v6.4.3/build/ol.js"></script>
    <script>
      //街道标注样式
      const streetStyle = new ol.style.Style({
        text: new ol.style.Text({
          font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
          placement: 'line',
          fill: new ol.style.Fill({
            color: 'white'
          })
        })
      })
      //地图图层用必应
      const mapLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
          key: 'AmMSiUpOokUvbXi9sfQbdzPJQqpZ-9ZTMPJ-0uhNsB8cF3H4RMVSSuh4CTTeh2yG',
          imagerySet: 'Aerial'
        })
      })
      const vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url: 'vienna-streets.geojson'
        }),
        style: function(feature) { //遍历每个要素并为其设置标注
          style.getText().setText(feature.get('name'))
          return style
        }
      })
      //view视图
      const mapView = new ol.View({
        extent: [1817379, 6139595, 1827851, 6143616],
        center: ol.extent.getCenter([1817379, 6139595, 1827851, 6143616]),
        zoom: 17,
        minZoom: 14
      })
      
      const map = new ol.Map({
        target: 'map',
        layers: [mapLayer, vectorLayer],
        view: mapView
      })

    </script>
  </body>
</html>
